<template>
  <el-carousel
    class="xBanner"
    arrow="always"
    :height="normaHeight"
    :interval="5000"
    ref="Carousel">
    <el-carousel-item>
      <div class="banner b1">
      </div>
    </el-carousel-item>
    <el-carousel-item>
      <div class="banner b2">
      </div>
    </el-carousel-item>
    <el-carousel-item>
      <div class="banner b3">
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'xBanner',
  props: {
    height: {
      type: String | Number,
      default: 500
    }
  },
  methods: {
    prev() {
      this.$refs.Carousel.prev()
    },
    next() {
      this.$refs.Carousel.next()
    }
  },
  computed: {
    normaHeight() {
      const height = this.height
      if (typeof height === 'number') {
        return height + 'px'
      }
      return height
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'

.xBanner
  .banner
    &.b1
      background-image: requireImg('banner1.jpg')
    &.b2
      background-image: requireImg('banner2.jpg')
    &.b3
      background-image: requireImg('banner3.jpg')

@media (max-width: $media-smail)
  .xBanner
    .banner
      background-size: 100% 100%
      &.b1
        background-image: requireImg('m-banner1.jpg') !important
      &.b2
        background-image: requireImg('m-banner2.jpg') !important
      &.b3
        background-image: requireImg('m-banner3.jpg') !important
</style>
